<template>
  <div class="ComparisonFileArea">
    <h4>书影原文对照</h4>
    <el-row style="display: flex; justify-content: space-between;">
      <el-col :span="11" style="margin-left: 10px; position: relative;">
          <div v-if="localIsMongolianFont" class="MengInput" style="
            writing-mode: vertical-lr;
            text-orientation: sideways-right;
            font-family: OyunQaganTig, sans-serif;
            background-color: #ecddd6;
            width: 252.07px;
            height: 200.33px;
            font-size: 18px;
            overflow-x: auto; /* or overflow-y: scroll; */
            border: 1px solid #DCDFE6;
            border-radius: 4px
            ">
            {{ LoacalSYtextarea }}
          </div>
          <div v-else class="custom-input-container">
            <el-input
              type="textarea"
              :rows="7"
              placeholder="请上传少语原文文件"
              v-model="LoacalSYtextarea"
              style="font-size: 18px"
            ></el-input>
          </div>
 </el-col>

      <el-col :span="11" style="margin-left: 20px;color: black;">
        <div class="custom-input-container">
          <el-input
            type="textarea"
            :rows="7"
            placeholder="请上传汉语对照文件"
            v-model="LoacalZtextarea"
            style="font-size: 18px;"
          ></el-input>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    SYtextarea: String,
    DZtextarea: String,
    isMongolianFont: Boolean
  },
  data () {
    return {
      LoacalSYtextarea: '',
      LoacalZtextarea: '',
      localIsMongolianFont: this.isMongolianFont
    }
  },
  watch: {
    isMongolianFont (newValue) {
      this.localIsMongolianFont = newValue
      console.log(this.localIsMongolianFont)
    },
    SYtextarea (newSYtextarea) {
      this.LoacalSYtextarea = newSYtextarea
      console.log(this.LoacalSYtextarea)
    },
    DZtextarea (newDZtextarea) {
      this.LoacalZtextarea = newDZtextarea
    }
  }
}
</script>

<style scoped lang="less">
.ComparisonFileArea {
  display: block;
  height: 280px;
}
/deep/.el-textarea__inner {
  background-color: #ecddd6;
  writing-mode: vertical-lr;
  text-orientation: sideways-right;
}

</style>
